<script setup lang='ts'>
import { ref } from "vue";
import { useRouter } from "vue-router";
import headerVue from "../components/pc/headerVue.vue";
import mitter from "../utils/mitt";
const router = useRouter()
const show = ref(false);
const title = ref('沙雕动画素材')
interface titletype {
    title: string
}
mitter.on('title', (Value) => {
    title.value = (Value as titletype).title
})
const toSearch = () => {
    router.push({ name: 'search' })
}


</script>

<template>
    <div class="m">
        <van-popup v-model:show="show" position="left" :style="{ width: '70%', height: '100%' }">
            <van-nav-bar title="沙雕动画素材" />
            <van-cell title="单元格" is-link />
            <van-cell title="单元格" is-link />
            <van-cell title="单元格" is-link />
            <van-cell title="单元格" is-link />
        </van-popup>
        <van-nav-bar fixed placeholder :title left-arrow>
            <template #left>
                <!-- <van-icon name="apps-o" size="24" @click="showPopup" color="black" /> -->
            </template>
            <template #right>
                <van-icon name="search" size="24" @click="toSearch" color="black" />
            </template>
        </van-nav-bar>
    </div>
    <!-- pc -->
    <div class="pc">
        <headerVue></headerVue>
    </div>
</template>

<style scoped lang="scss">
@import url('../assets/style/header.scss');
@media screen and (max-width:1024px) {
    .m{
        display: block;
    }
    .pc{
        display: none;
    }
}
@media screen and (min-width:1025px) {
    .m{
        display: none;
    }
    .pc{
        display: block;
    }
}
</style>